<template>
	<view class="checkout-page">
		<!-- 商品信息 -->
		<view class="section">
			<text class="section-title">商品</text>
			<!-- 商品列表 -->
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in productList" :key="index">
					<image class="product-img" :src="item.imgUrl" mode="widthFix"></image>
					<view class="product-info">
						<text class="product-name">{{ item.name }}</text>
						<text class="product-price">¥{{ item.price.toFixed(2) }}</text>
					</view>
					<view class="product-count">x{{ item.count }}</view>
				</view>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="section">
			<text class="section-title">支付方式</text>
			<view class="payment-methods">
				<view class="method-item" @click="selectPayment('balance')">
					<text>余额</text>
					<view class="radio" :class="{ selected: selectedPayment === 'balance' }">
						<view class="radio-dot" v-if="selectedPayment === 'balance'"></view>
					</view>
				</view>
				<view class="method-item" @click="selectPayment('alipay')">
					<text>支付宝</text>
					<view class="radio" :class="{ selected: selectedPayment === 'alipay' }">
						<view class="radio-dot" v-if="selectedPayment === 'alipay'"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 优惠券选择 -->
		<view class="section">
			<text class="section-title">优惠券</text>
			<view class="coupon-selector" @click="goToCouponList">
				<text v-if="selectedVoucher">已选择: {{ selectedVoucher.amount }}元 {{ selectedVoucher.title }}</text>
				<text v-else>未选择优惠券</text>
				<text class="arrow">→</text>
			</view>
		</view>

		<!-- 价格明细 -->
		<view class="price-detail">
			<view class="price-row">
				<text>商品总价</text>
				<text>¥{{ productTotal.toFixed(2) }}</text>
			</view>
			<view class="price-row">
				<text>运费</text>
				<text>¥{{ shippingFee.toFixed(2) }}</text>
			</view>
			<view class="price-row" v-if="selectedVoucher">
				<text>优惠</text>
				<text class="discount-text">-¥{{ selectedVoucher.amount.toFixed(2) }}</text>
			</view>
			<view class="divider"></view>
			<view class="price-row total">
				<text>实付款</text>
				<text>¥{{ actualPayment.toFixed(2) }}</text>
			</view>
		</view>

		<!-- 底部提交栏 -->
		<view class="bottom-bar">
			<view class="total-amount">
				<text>合计: ¥{{ actualPayment.toFixed(2) }}</text>
			</view>
			<button class="submit-btn" @click="submitOrder" :disabled="actualPayment <= 0">提交订单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList: [], // 商品列表
				productTotal: 0, // 商品总价
				shippingFee: 8, // 运费
				selectedVoucher: null, // 选中的优惠券
				actualPayment: 0, // 实付款
				selectedPayment: 'balance' // 默认支付方式
			};
		},
		onLoad(options) {
			// 模拟商品数据（实际项目中从接口或上一页获取）
			this.productList = [
				{
					id: 1,
					name: "新鲜玫瑰花束",
					price: 59.9,
					count: 1,
					imgUrl: "https://picsum.photos/200/200?random=1"
				},
				{
					id: 2,
					name: "包装纸套装",
					price: 15.8,
					count: 1,
					imgUrl: "https://picsum.photos/200/200?random=2"
				}
			];

			// 计算商品总价
			this.calculateProductTotal();
			
			// 如果有从上一页传递的总价，优先使用
			if (options.total) {
				this.productTotal = parseFloat(options.total) || this.productTotal;
			}
		},
		onShow() {
			// 页面显示时读取选中的优惠券
			this.loadSelectedVoucher();
			this.calculatePayment();
		},
		methods: {
			// 计算商品总价
			calculateProductTotal() {
				this.productTotal = this.productList.reduce((sum, item) => {
					return sum + (item.price * item.count);
				}, 0);
			},

			// 加载选中的优惠券
			loadSelectedVoucher() {
				const voucher = uni.getStorageSync('selectedVoucher');
				if (voucher && typeof voucher.amount === 'number') {
					this.selectedVoucher = voucher;
				} else {
					this.selectedVoucher = null;
				}
			},
			
			// 计算实付款
			calculatePayment() {
				// 确保所有数值都是有效的数字
				const productTotal = Number(this.productTotal) || 0;
				const shippingFee = Number(this.shippingFee) || 0;
				const voucherAmount = this.selectedVoucher ? Number(this.selectedVoucher.amount) || 0 : 0;
				
				// 计算实付款：商品总价 + 运费 - 优惠券金额（不小于0）
				this.actualPayment = Math.max(productTotal + shippingFee - voucherAmount, 0);
			},
			
			// 选择支付方式
			selectPayment(method) {
				this.selectedPayment = method;
			},
			
			// 前往优惠券列表页
			goToCouponList() {
				uni.navigateTo({
					url: "/pages/discount/account" // 优惠券列表页路径
				});
			},
			
			// 提交订单
			submitOrder() {
				if (this.actualPayment <= 0) {
					uni.showToast({
						title: '请检查订单信息',
						icon: 'none'
					});
					return;
				}
				
				// 订单提交逻辑
				uni.showToast({
					title: '订单提交成功',
					icon: 'success'
				});
				
				// 清空选中的优惠券（可选）
				uni.removeStorageSync('selectedVoucher');
				
				// 2秒后返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		watch: {
			// 监听数据变化，自动重新计算
			productList() {
				this.calculateProductTotal();
				this.calculatePayment();
			},
			selectedVoucher() {
				this.calculatePayment();
			},
			shippingFee() {
				this.calculatePayment();
			}
		}
	};
</script>

<style scoped>
	.checkout-page {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.section {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	/* 商品列表样式 */
	.product-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.product-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.product-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		flex-shrink: 0;
	}

	.product-info {
		flex-grow: 1;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.product-price {
		font-size: 28rpx;
		color: #ff4d4f;
	}

	.product-count {
		font-size: 26rpx;
		color: #666;
	}

	/* 支付方式样式 */
	.payment-methods {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.method-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
	}

	.radio {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.radio.selected {
		border-color: #ff4d4f;
	}

	.radio-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #ff4d4f;
	}

	/* 优惠券选择样式 */
	.coupon-selector {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		color: #666;
	}

	.arrow {
		font-size: 32rpx;
		color: #ccc;
	}

	/* 价格明细样式 */
	.price-detail {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	.discount-text {
		color: #ff4d4f;
	}

	.divider {
		height: 1rpx;
		background: #eee;
		margin: 20rpx 0;
	}

	.total {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	/* 底部提交栏样式 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.total-amount {
		font-size: 32rpx;
		font-weight: 600;
		color: #ff4d4f;
	}

	.submit-btn {
		background: #ff4d4f;
		color: white;
		border: none;
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}

	.submit-btn:disabled {
		background: #ccc;
	}
</style>